<template>
  <block>
    <!-- #ifdef MP-WEIXIN -->
    <image
      :src="src"
      :style="style"
      :mode="mode"
      class="XImage class"
      @click="clickHandler"
    />
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN -->
    <image :src="src" :mode="mode" class="XImage class" @click="clickHandler" />
    <!-- #endif -->
  </block>
</template>
<script lang="ts">
import Vue from '@/utils/Vue';
import { PropType } from 'vue';

interface IData {}

export default Vue.extend({
  data(): IData {
    return {};
  },
  components: {},
  props: {
    src: {
      type: String,
      required: false,
    },
    mode: {
      required: false,
      type: String as PropType<'widthFix' | 'aspectFill'>,
      default: 'widthFix',
    },
    // #ifdef MP-WEIXIN
    style: {
      type: [String, Object] as PropType<any>,
      required: false,
    },
    // #endif
  },
  methods: {
    clickHandler(event: Event) {
      console.log(this);
      this.$emit('click', event);
    },
  },
  options: {
    virtualHost: true,
  },
  externalClasses: ['class'],
});
</script>

<style lang="less">
.XImage {
  width: 100%;
  height: 100%;
  flex-grow: 0;
  flex-shrink: 0;
}
</style>
